<template>
  <div class="home-wrap">
    <div class="header">
      <div class="header-content">
        <div class="banner">
          <img alt="Vue logo" style="width: 64px; height: 64px" src="../../assets/logo.png">
          <div class="text">

            <h3  >酷腾实验资源管理平台</h3>
            <p  >创新教育，赋能未来</p>
          </div>
        </div>
        <div class="header-tabs">
          <a-tabs defaultActiveKey="3" style="margin-top: 20px" @change="gotab">
            <a-tab-pane tab="器材" key="1">
            </a-tab-pane>
            <a-tab-pane tab="资源" key="2">
            </a-tab-pane>
            <a-tab-pane tab="实验" key="3">
            </a-tab-pane>
          </a-tabs>
        </div>
        <div class="header-user">
          <user-menu></user-menu>
        </div>
      </div>
    </div>
  <div class="home">
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="6" :sm="24">
              <a-form-item label="关键字">
                <a-input v-model="queryParam.keywords" placeholder="搜索名称"/>
              </a-form-item>
            </a-col>

            <a-col :md="6" :sm="24">
              <a-form-item
                      label="学科"
              >
                <a-select
                        optionFilterProp="title"
                        mode="default"
                        allowClear
                        v-model="queryParam.subject_id"
                        @change="getCateTreeList()"
                        placeholder="选择学科"
                >
                  <a-select-option :key="option.id" v-for="option in subjectOptions" :title="option.name" :disabled="option.disabled" :value="option.id">{{option.name}}</a-select-option>
                </a-select>
              </a-form-item>

            </a-col>

            <a-col :md="!advanced && 6 || 24" :sm="24">
            <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
              <a-button type="primary" @click="onSearch">查询</a-button>
              <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
            </span>
            </a-col>
          </a-row>
        </a-form>
      </div>

    </a-card>

    <a-row :gutter="8" style="margin-top: 10px">
      <a-col :span="5">

        <div class="tree-wrapper">
          <a-menu
                  mode="inline" class="custom-tree"
          >
            <a-sub-menu v-for="cate in cateTree" v-if="cate.children">
              <span slot="title"><span>{{cate.title}}</span></span>
              <a-menu-item @click="handleCateClick" v-for="subcate in cate.children" :key="subcate.key"  >{{subcate.title}}</a-menu-item>
            </a-sub-menu>
            <a-menu-item @click="handleCateClick" v-else :key="subcate.key"  >{{cate.title}}</a-menu-item>
          </a-menu>
        </div>

      </a-col>
      <a-col :span="19">

        <div class="card-list" ref="content"  >
          <a-list
                  :grid="{gutter: 24, lg: 3, md: 2, sm: 1, xs: 1}"
                  :dataSource="list"
          >
            <a-list-item slot="renderItem" slot-scope="item, index">
              <template v-if="item === null">
                <a-button class="new-btn" type="dashed">
                  <a-icon type="plus"/>
                  新增产品
                </a-button>
              </template>
              <template v-else>
                <a-card :hoverable="true" @click="goDetail(item)">
                  <a-card-meta>
                    <div style="margin-bottom: 3px" slot="title">{{ item.name }}</div>
                    <a-avatar class="card-avatar" slot="avatar" :src="item.avatar" size="large"/>
                    <div class="meta-content" slot="description">{{ item.explain }}</div>
                  </a-card-meta>
                  <template class="ant-card-actions" slot="actions">
                    <a v-if="!item.is_collection"><a-icon type="heart"  @click.stop="collectionAdd(item)" /></a>
                    <a v-else><a-icon type="heart"  theme="filled" @click.stop="collectionDelete(item)" :style="{ fontSize: '16px', color: '#08c' }" /></a>
                    <a><a-icon type="file-search" /></a>
                  </template>
                </a-card>
              </template>
            </a-list-item>
          </a-list>
          <a-pagination  v-model="pagination.pageNo" :defaultPageSize="pagination.pageSize" @change="pageChange" :total="pagination.total" />
        </div>



      </a-col>
    </a-row>

  </div>
  </div>
</template>

<script>
  // @ is an alias to /src

  import Trend from '@/components/Trend'
  import AvatarList from '@/components/AvatarList'
  import CountDown from '@/components/CountDown/CountDown'
  import Ellipsis from '@/components/Ellipsis'
  import NumberInfo from '@/components/NumberInfo'
  import STable from '@/components/table/'

  import UserMenu from '@/components/tools/UserMenu'


  import {getCateTreeList} from '@/api/subject'
  import {getMakeExperimentList,collectionAdd,collectionDelete} from '@/api/experiment'

  import {
    getMaterialList,
    subjectOptions,
  } from '@/api/material'


  const AvatarListItem = AvatarList.AvatarItem


  const dataSource = []
  for (let i = 0; i < 11; i++) {
    dataSource.push({
      title: 'Alipay',
      avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
      content: '在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的组件会被抽离成一套标准规范。'
    })
  }


  const article = []
  for (let i = 0; i < 11; i++) {
    article.push({
      id: 3,
      avatar: 'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png',
      owner: '付小小',
      content: '段落示意：蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 ant.design，用最小的工作量，无',
      star: 3,
      percent: 43,
      like: 32,
      message: 32,
      description: '中台产品的研发过程中，会出现不同的设计规范',
      href: 'https://ant.design',
      title: 'Alipay',
      updatedAt: '212',
      members: [
        {
          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png',
          name: '曲丽丽',
          id: 'member1'
        },
        {
          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png',
          name: '王昭君',
          id: 'member2'
        },
        {
          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png',
          name: '董娜娜',
          id: 'member3'
        }
      ],
      activeUser: 3222,
      newUser: 212,
      cover: 'https://gw.alipayobjects.com/zos/rmsportal/uMfMFlvUuceEyPpotzlq.png'
    })
  }

  export default {
    name: 'Home',
    components: {
      NumberInfo,
      Ellipsis,
      CountDown,
      Trend,
      AvatarList,
      STable,
      UserMenu
    },
    data () {
      return {
        targetTime: new Date().getTime() + 3900000,
        queryParam:{
          subject_id:1
        },
        advanced:false,
        loading:false,

        pagination:{
          pageSize:12,
          pageNo:1,
          total:0
        },
        subjectOptions:[],
        list:[],
        selectedRowKeys: [],
        selectedRows: [],
        dataSource,
        article,

        cateTree: [
          {"id":1,"key":1,"value":"1","parent_id":0,"title":"协议","children":
                    [{"id":3,"key":3,"value":"3","parent_id":1,"title":"注册"},
                      {"id":4,"key":4,"value":"4","parent_id":1,"title":"财务"},
                      {"id":8,"key":8,"value":"8","parent_id":1,"title":"入驻协议"}]
          },
          {"id":2,"key":2,"value":"2","parent_id":0,"title":"帮助","children":
                    [{"id":5,"key":5,"value":"5","parent_id":2,"title":"用户帮助"},
                      {"id":6,"key":6,"value":"6","parent_id":2,"title":"品荐师帮助"},
                      {"id":7,"key":7,"value":"7","parent_id":2,"title":"商户帮助"}]}
        ],
      }
    },
    mounted(){
      let that = this;
      that.fetchList();
      that.getSubjectOptions();
      that.getCateTreeList();
    },
    methods: {
      getCateTreeList(){
        let that= this;
        getCateTreeList({
          subject_id:that.queryParam.subject_id
        })
                .then(res => {
                  that.cateTree =  res.data;
                })
      },
      handleCateClick(value){
        console.log(value);

      },
      pageChange(pageNo,pageSize){
        this.pagination.pageNo = pageNo;
        this.pagination.pageSize = pageSize;
        this.fetchList();
      },
      fetchList(){
        let self = this
        getMakeExperimentList(Object.assign(self.queryParam,self.pagination)).then(res => {
          self.list = res.data.list
          self.pagination.total = res.data.total
        })
      },
      getSubjectOptions(){
        let that = this;
        subjectOptions()
          .then(res => {
            console.log(res)
            that.subjectOptions =  res.data
          })
      },

      collectionAdd(record){
        let self = this
        record.is_collection = true;
        collectionAdd({ collection_id: record.id  }).then(res => {
          self.$message.success('收藏成功')

          self.$refs.table.refresh(true)
        }).catch(err =>{
          self.$message.error(err.data.msg)
        })

      },
      collectionDelete(record){
        let self = this
        console.log('delete');
        record.is_collection = false;
        collectionDelete({ collection_id: record.id  }).then(res => {

          self.$refs.table.refresh(true)
        }).catch(err =>{
          self.$message.error(err.data.msg)
        })

      },
      onSearch(){
        this.pagination.current=1;
        this.fetchList();
      },
      onEndHandle () {
        this.$message.success('CountDown callback!!!')
      },
      onEndHandle2 () {
        this.$notification.open({
          message: 'Notification Title',
          description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
        })
      },
      goDetail(record){
        this.$router.push({name:'HomeExperimentDetail',query:{id:record.id}});

      },
      gotab(index){
        console.log(index)
        switch (index) {
          case '1' :
            this.$router.push({name:'HomeMaterialList'});
            break;
          case '2' :
            this.$router.push({name:'HomeResourseList'});
            break;
          case '3' :
            this.$router.push({name:'HomeExperimentList'});
            break;

        }
      },
    }
  }
</script>
<style>

  .header-tabs   .ant-tabs-bar{
    border: none !important;
  }

  .header-user .action {
    cursor: pointer;
    padding: 0 12px;
    display: inline-block;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    height: 100%;
  }
  .header-user .avatar {
    margin: 20px 8px 20px 0;
    color: #1890ff;
    background: hsla(0, 0%, 100%, 0.85);
    vertical-align: middle;
  }

</style>
<style  lang="less" scoped>

  .home-wrap{
    background-color: #F0F2F9;
  }
  .header{
    height: 74px;
    padding: 0 12px 0 0;
    background: #fff;
    -webkit-box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
    box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
    position: fixed;
    top:0;
    left: 0;
    z-index: 10;
    right: 0;
  }
  .header-content{
    width: 1200px;
    margin: 0 auto;
    padding: 10px 0 ;
  }
  .header-content .banner{
    float: left;
    margin-right: 20px;
  }
  .header-content .banner img {
    float: left;
    margin-right: 10px;
  }
  .header-content .banner .text {
    float: left;
    width: 200px;
  }
  .header-content .header-tabs{
    float: left;
  }
  .header-content .header-user{
    float: right;
  }

  .home {
    width: 1200px;
    margin: 64px auto;
    padding: 25px 0;

  }

  .ant-pro-pages-list-projects-cardList {
    margin-top: 24px;

    /deep/ .ant-card-meta-title {
      margin-bottom: 4px;
    }

    /deep/ .ant-card-meta-description {
      height: 44px;
      overflow: hidden;
      line-height: 22px;
    }

    .cardItemContent {
      display: flex;
      height: 20px;
      margin-top: 16px;
      margin-bottom: -4px;
      line-height: 20px;

      > span {
        flex: 1 1;
        color: rgba(0,0,0,.45);
        font-size: 12px;
      }

      /deep/ .ant-pro-avatar-list {
        flex: 0 1 auto;
      }
    }
  }
</style>
